@import './lib/reset.scss';

html, body, #root, .container {
  @include rect(100%, 100%);
}
.container {
  @include flexbox();
  @include flex-direction(column);
  .box2 {
    @include flex();
    @include rect(100%, auto);
    @include flexbox();
    @include flex-direction(column);
			.detail-header{
				@include rect(100%, 0.5rem);
				position: absolute;
				top:0;
				left:0;
				z-index:1000;
				@include flexbox();
				@include justify-content(space-between);
				@include align-items();
				.dh-left,.dh-right{
					@include flexbox();
					@include justify-content();
					@include align-items();
					span{
						display:block;
						@include rect(0.35rem,0.35rem);
						background: rgba(0,0,0,0.3);
						border-radius: 50%;
						@include flexbox();
						@include justify-content();
						@include align-items();
						margin:0 0.1rem;
						.iconfont{
							@include text-color(#fff);
							@include font-size(0.2rem);
						}
					}
				}
			}
			.content {
				@include flex();
				@include rect(100%, auto);
				@include overflow();
				@include background-color(#f7f7f7);
			.msg{
				padding-left:0.1rem;
				padding-top:0.1rem;
				@include rect(100%,auto);
				@include background-color(#fff);
				@include flexbox();
				flex-direction:column;
				@include justify-content();
				@include border(0 0 1px 0,#e6e6e6,solid);
				h2{
					@include font-size(0.16rem);
					line-height:0.35rem;
				}
				.cont{
					line-height:0.3rem;
					.nprice{
						@include font-size(0.18rem);
						font-weight:bold;
					}
					.oprice{
						@include text-color(#999);
						margin-left: 0.2rem;
					}
				}
			}
			.others{
				@include background-color(#fff);
				@include rect(100%,0.4rem);
				@include border(0 0 1px 0,#bbb,solid);
				@include flexbox();
				@include justify-content(space-between);
				.wancheng{
					@include flexbox();
					@include rect(3rem,0.4rem);
					li{
						@include rect(1rem,0.4rem);
						@include flexbox();
						@include justify-content();
						@include align-items();
						.iconfont{
							@include text-color(#F8584F);
							margin-right:0.1rem;
						}
						span{
							@include font-size(0.12rem);
							@include text-color(#aaa);
						}
					}
				}	
				em{
					@include rect(auto,0.4rem);
					@include flexbox();
					@include justify-content();
					@include align-items();
					margin-right:0.1rem;
				}
			}
			.sell{
				@include rect(100%,0.4rem);
				@include background-color(#fff);
				@include flexbox();
				@include align-items();
				@include border(0 0 2px 0,#eaeaea,solid);
				span{
					font-weight: bold;
					margin-left: 0.1rem;
				}
				i{
					display:block;
					@include rect(0.6rem,0.2rem);
					@include background-color(#fde2e1);
					@include text-color(#f8675f);
					@include border(2px 2px 2px 2px,#f8675f,solid,0.05rem);
					@include font-size(0.12rem);
					@include flexbox();
					@include justify-content();
					@include align-items();
					margin: 0 0.1rem 0 0.3rem;
				}
				p{
					@include text-color(#919191);
				}
			}
			.my-list{
				margin-top: 0.12rem;
			}
			.images{
				margin-top: 0.12rem;
				@include rect(100%,auto);
				@include background-color(#fff);
				@include flexbox();
				@include flex-direction(column);
				img{
					@include rect(100%,auto)
				}
				span{
					@include rect(100%, 0.4rem);
					@include flexbox();
					@include justify-content();
					@include align-items();
					@include font-size(0.16rem);
				}
				.goodsmsg{
					@include rect(100%,2rem);
					@include background-color(#fff);
					padding-left: 0.2rem;
					p{
						@include font-size(0.12rem);
						@include text-color(#919191);
					}
				}
			}
			.delist{
				@include rect(100%,auto);
				@include background-color(#f7f7f7);
				.dl-top{
					@include rect(100%,0.4rem);
					@include background-color(#fff);
					margin-top:0.15rem;
					@include flexbox();
					@include justify-content();
					@include align-items();
					span{
						@include font-size(0.16rem);
						@include text-color(#7e7e7e);
					}	
				}
				ul{
					@include rect(100%,auto);
					@include background-color(#fff);
					@include flexbox();
					flex-wrap: wrap;
					li{
						@include rect(1.7rem,3.1rem);
						@include background-color(#fff);
						margin-left:0.11rem;
						margin-bottom:0.1rem;
						img{
							@include rect(1.7rem,2.32rem);
						}
						i{
							@include font-size(0.1rem);
							@include text-color(#919191);
						}
						p{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.libottom{
							@include flexbox();
							@include justify-content(space-between);
							@include align-items();
							em{
								@include font-size(0.18rem);
							}
							strong{
								@include rect(0.4rem,0.18rem);
								@include text-color(#f8584f);
								@include border(1px 1px 1px 1px,#f8584f,solid)
								@include flexbox();
								@include justify-content();
								@include align-items();
								@include background-color(#fef0ed);
							}
						}
					}
				}
			}
		}
	}	
		.de-foot{
			@include flexbox();
			@include justify-content(space-between);
			@include rect(100%, 0.5rem);
			@include background-color(#fff);
			@include border(1px 0 0 0,#e6e6e6,solid);
			ul{
				@include flexbox();
				@include rect(2.2rem, 0.5rem);
				li{
					@include flexbox();
					@include justify-content();
					@include align-items();
					flex-direction:column;
					.iconfont {
						@include font-size(0.2rem);
					}
					span{
						@include text-color(#aaa);
					}
				}
			}
			em{
				@include flexbox();
				@include justify-content();
				@include align-items();
				@include rect(1rem,0.5rem);
				@include background-color(#f8584f);
				@include text-color(#fff);
				@include font-size(0.16rem);
			}
		}
		.more{
			display: none;
			position: absolute;
			left:0;
			bottom:0;
			@include rect(100%, 3.6rem);
			@include background-color(#fff);
			z-index:1000;
			h3{
				@include rect(100%, 0.45rem);
				@include flexbox();
				@include justify-content();
				@include align-items();
			}
			.contents{
				@include flexbox();
				@include justify-content();
				@include rect(100%, auto);
				padding: 0.08rem 0;
				flex-direction:column;
				margin-left:0.1rem;
				@include border(0 0 1px 0,#c8c7cc,solid);
				span{
					.iconfont{
						@include text-color(#F8584F);
						margin-right:0.1rem;
					}
				}
				em{
					@include text-color(#939393);
					@include font-size(0.10rem);
					line-height:0.15rem;
					margin-left:0.25rem;
					margin-top:0.05rem;
				}
			}
			.con-3{
				@include rect(3.6rem, auto);
				@include border(0 0 1px 0,#fff,solid);
			}
			.am-button{
				height:0.4rem;
				margin-top: 0.06rem;
			}
		}
		.select{
			display: none;
			position: absolute;
			left:0;
			bottom:0;
			@include rect(100%, auto);
			@include background-color(#fff);
			z-index:1000;
			.se-top{
				@include rect(100%, 1.2rem);
				@include background-color(#fff);
				@include flexbox();
				@include align-items();
				@include border(0 0 1px 0,#e1e1e1,solid)
				img{
					@include rect(1rem, 1rem);
					margin: 0 0.15rem;
				}
				.set-right{
					@include flexbox();
					flex-direction: column;
					span{
						@include text-color(#f8584f);
						@include font-size(0.18rem);
						font-weight:bold;
						line-height: 0.35rem;
					}
					i{
						@include text-color(#919191);
						@include font-size(0.12rem);
						line-height: 0.22rem;
						margin-left: 0.05rem;
					}
				}
			}
			.se-center1{
				@include flexbox();
				flex-direction:column;
				h4{
					margin-left: 0.19rem;
					margin-top:0.1rem;
				}
				.sec-con{
					@include flexbox();
					flex-wrap: wrap;
					span{
						display: block;
						@include rect(1rem, 0.3rem);
						@include border(1px 1px 1px 1px,#919191,solid,0.05rem);
						@include flexbox();
						@include justify-content();
						@include align-items();
						@include font-size(0.16rem);
						@include text-color(#919191);
						margin: 0.06rem 0;
						margin-left: 0.18rem;
					}
				}
			}
			.se-center2{
				@include flexbox();
				flex-direction:column;
				h4{
					margin-left: 0.19rem;
					margin-top:0.05rem;
				}
				.sec-con2{
					@include flexbox();
					flex-wrap: wrap;
					span{
						display: block;
						@include rect(1rem, 0.3rem);
						@include border(1px 1px 1px 1px,#919191,solid,0.05rem);
						@include flexbox();
						@include justify-content();
						@include align-items();
						@include font-size(0.16rem);
						@include text-color(#919191);
						margin: 0.06rem 0;
						margin-left: 0.18rem;
					}
				}
			}
			.am-button{
				height:0.4rem;
				margin-top: 0.1rem;
			}
		}
		.blot{
			display: none;
			position: absolute;
			@include rect(100%, 100%);
			left: 0;
			top:0;
			@include background-color(rgba(0,0,0,0.3));
			z-index: 999;
		}
	}